
import { login, LoginRep, LoginReq } from "@/service/apis/user";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { LoginForm, ProFormText } from "@ant-design/pro-components";
import { FC } from "react";
import { useNavigate } from "react-router-dom";

const Login: FC = () => {
  const navigate = useNavigate();
  return (
    <div className="flex items-center justify-center h-full">
      <div className="mt-[-200px]">
        <LoginForm
          logo="https://github.githubassets.com/favicons/favicon.png"
          title="stratify-AI量化"
          subTitle="中国来钱最快的量化系统"
          onFinish={(values: LoginReq) => {
            return login(values)
              .then((res: LoginRep) => {
                localStorage.setItem("Authorization", `Bearer ${res?.token}`);
                navigate("/");
                return true;
              })
              .catch(() => {
                return false;
              });
          }}
        >
          <ProFormText
            name="username"
            fieldProps={{
              size: "large",
              prefix: <UserOutlined className={"prefixIcon"} />,
            }}
            placeholder={"请输入用户名"}
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            fieldProps={{
              size: "large",
              prefix: <LockOutlined className={"prefixIcon"} />,
            }}
            placeholder={"请输入密码"}
            rules={[
              {
                required: true,
                message: "请输入密码！",
              },
            ]}
          />
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;
